<template>
  <base-modal :show.sync="show" class="customer-attention-modal" width="520px">
    <h3 slot="title">{{$t('customer.detail.customerAttentionModal.title')}} <small>{{$t('customer.detail.customerAttentionModal.subTitle')}}</small></h3>
    
    <p class="customer-attention-tips" v-if="users.length == 0">{{$t('customer.detail.customerAttentionModal.noAttentionTip')}}</p>
    <template v-else>
      <span 
        v-for="user in users" :key="user.userId"
        class="customer-attention-tag">
          <template v-if="isOpenData && user.staffId">
            <open-data type='userName' :openid="user.staffId"></open-data>
          </template>
          <template v-else>
            {{user.displayName || user.userName}} 
          </template>
        <i class="iconfont icon-delete" @click="remove(user)"></i>
      </span>
    </template>
    
    <div class="customer-attention-footer" slot="footer">
      <el-button @click="show = false">{{$t('customer.detail.customerAttentionModal.close')}}</el-button>
      <el-button type="primary" @click="submit">{{$t('customer.detail.customerAttentionModal.confirm')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
import { isOpenData } from '@src/util/platform';
import { cloneDeep } from 'lodash';
import Platform from '@src/platform';

export default {
  name: 'customer-attention',
  data(){
    return {
      isOpenData,
      show: false,
      originUsers: [],
      users: []
    }
  },
  methods: {
    view(users){
      this.originUsers = users;
      this.users = cloneDeep(users);
      this.show = true;
    },
    remove(user){
      let index = this.users.findIndex(u => u.userId == user.userId);

      if(index >= 0) this.users.splice(index, 1)
    },
    async submit(){
      try {
        let removeUsers = this.originUsers.filter(u => !this.users.find(i => i.userId == u.userId));
        if(removeUsers.length == 0) return this.show = false;

        let userName = removeUsers.reduce((acc, cur, index, arr) => {
          if(index > 3) return acc;
          if(index == 3) {
            return `${acc.slice(0, -1)}等${arr.length}人`;
          }

          return `${acc}${cur.displayName || cur.userName},`;
        }, '');

        if(userName.endsWith(',')) userName = userName.slice(0, -1);
        
        // TODO 国际化 
        if(!await Platform.confirm(this.$t('customer.detail.attentionUserNotify.unfollowTip', {userName}))) return;

        this.$emit('submit', {removeUsers, userName})
        this.show = false;
      } catch (error) {
        console.error('error', error)
      }
    }
  }
}
</script>

<style lang="scss">
.customer-attention-tag{
  cursor: default;
  display: inline-block;
  @include backgroundColor();
  color: #fff;
  margin: 5px 0 0 5px;
  padding: 3px 12px;
  line-height: 20px;
  border-radius: 4px;

  i{
    cursor: pointer;
    font-size: 12px;
  }

  &:hover{
    background-color: $color-primary-light-1;
  }
}

.customer-attention-modal{
  user-select: none;

  small{
    color: $text-color-secondary;
    font-size: 12px;
  }

  .base-modal-body{
    padding: 5px 10px 10px 5px;
  }

  .base-modal-footer{
    border-top: 1px solid #e9ecef;
    padding: 10px;
    text-align: right;
  }
}

.customer-attention-tips{
  margin: 0;
  padding: 5px 0 0 5px;
  line-height: 26px;
  color: $text-color-secondary;
}
</style>

